<template>
  <CommonCard title="今日用户交易数" :value="reportData.userToday">
    <template #default>
      <v-chart :option="option"></v-chart>
    </template>
    <template #footer>
      <span>退货率</span>
      <span class="css-1">{{ reportData.returnRate }}%</span>
    </template>
  </CommonCard>
</template>

<script setup>
import { ref, watch } from "vue";
import CommonCard from "./CommonCard.vue";

const props = defineProps({
  reportData: {
    type: Object,
    required: true,
  },
});

const option = ref({});

const renderChart = (data) => {
  option.value = {
    xAxis: {
      type: "category",
      show: false,
      data: [
        "00:00",
        "03:00",
        "05:00",
        "07:00",
        "09:00",
        "11:00",
        "13:00",
        "15:00",
        "17:00",
        "19:00",
        "21:00",
        "23:00",
      ],
    },
    yAxis: {
      show: false,
    },
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    },
    tooltip: {},
    series: {
      // tooltip需要在series数据中, 设置name属性
      name: "实时交易量",
      type: "bar",
      data: data,
      barWidth: "60%",
    },
  };
};

watch(props, () => {
  renderChart(props.reportData.orderUserTrend);
});
</script>

<style scoped></style>
